<!--
 * @Description: 工单详情
 * @Author: charles
 * @Date: 2021-12-14 22:10:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-06 14:36:53
-->
<template>
  <div class="orderDetail">
    <!-- {{resData}} -->
    <el-page-header @back="$router.go(-1)" content="工单详情">
    </el-page-header>
    <div class="engineerInfo">
      <div class="engineer_content">
        <el-form 
        :data="resData">
          <el-row>
            <el-col :span="12">
              <el-form-item 
              label="工程名称"  
              label-position="left"
              align="left">{{order.engineer_name}}</el-form-item>
              </el-col>
            <el-col :span="12">
              <el-form-item 
              label="设备名称"
              align="left"
              prop="device_name">{{order.device_name}}</el-form-item>
              </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item 
              label="工程类型"  
              label-position="left"
              align="left">{{order.type}}</el-form-item>
              </el-col>
            <el-col :span="12">
              <el-form-item 
              label="工程状态"
              align="left">{{order.status}}</el-form-item>
              </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item 
              label="开始时间"  
              label-position="left"
              align="left">{{order.create_time | fmtTime}}
              </el-form-item>
              </el-col>
            <el-col :span="12">
              <el-form-item 
              label="结束时间"
              align="left"
              v-if="order.status != '已完成'">{{order.status}}</el-form-item>
              <el-form-item 
              label="结束时间"
              align="left"
              v-else>{{order.finish_time}}</el-form-item>
              </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item 
              label="报修原因"  
              label-position="left"
              align="left"
              v-if="order.bill_why == null">暂无</el-form-item>
              <el-form-item 
              label="报修原因"  
              label-position="left"
              align="left"
              v-else>{{order.bill_why}}</el-form-item>
              </el-col>
            <el-col :span="12">
              <el-form-item 
              label="维修工人"
              align="left" v-if="order.account_name == null">暂无</el-form-item>
              <el-form-item 
              label="维修工人"
              align="left" v-else>{{order.account_name}}</el-form-item>
            </el-col>
            <el-col>
              <el-form-item 
              label="开始时图片"
              align="left"
              >
              <img v-for="(item,index) in order.begin_photos"
              :key="index" :src="item" style="margin-right:10px" width="250px" height="200px">
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item 
              label="结束时图片"
              align="left">
              <img v-for="(item,index) in order.end_photos"
              :key="index" :src="item"  style="margin-right:10px" width="250px" height="200px">
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from '@/utils/request.js';
export default {
  data(){
    return{
      resData:{},
      order:{},
      params:{
        page:1,
        pageSize:10,
      },
      item:{},
    };

  },
  methods:{
    //查询工程绑定的设备
    findAllOrders(){
      get("/workorder/pageQuery",this.params).then((res) =>{
        this.resData=res.data;
      });
    },
  },
  created(){
    this.order=this.$route.query;
    //调用查询设备的方法
    this.findAllOrders();
  },
}
</script>